<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.btn{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -25px;
				margin-bottom: -25px;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 50%;
				font-size: 14px;
				background: #eee;
				transform-origin: center center;
			}
			.is-active{
				animation: water 1s ease-in-out;
			}
			@-webkit-keyframes water{
				0%,100%{
					transform: scaleX(1) scaleY(1);
				}
				20%,60%{
					transform: scaleX(1.4) scaleY(1.1);
				}
				40%,80%{
					transform: scaleX(1.1) scaleY(1.4);
				}
			}
		</style>
	</head>
	<body>
		<div class="btn">
			水滴
		</div>
		<script type="text/javascript">
			window.onload=()=>{
				let btn = document.querySelector('.btn')
				btn.addEventListener('mouseover',()=>{
					btn.classList.add('is-active')
				})
				btn.addEventListener('animationend',()=>{
					btn.classList.remove('is-active')
				})
			}
		</script>
	</body>
</html>
